import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import '../evenbus.dart';
import '../myinfo.dart';
import '../screen_service.dart';

class Peidui extends StatefulWidget{

  int choose;
  Peidui(this.choose);

  @override
  _Peidui createState() =>_Peidui();
}

class _Peidui extends State<Peidui> with SingleTickerProviderStateMixin{

  List<Color> color = [Colors.yellow,Color(0xff47406A),Color(0xff47406A),];
  int choose = 0;
  AnimationController _controller;
  Animation _animation;

  List<String> titles = [
    '150 Monthly Free Coins',
    'Unlock Full Match Profiles',
    'Discounted Gender Preference',
    'VIP Badge',
    'Send Unlimited Message'
  ];
  @override
  void initState() {
    super.initState();
    choosePerson(widget.choose);
    _controller = AnimationController(
        vsync: this,
        duration: Duration(seconds: 2)
    );

    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
    _controller.forward();
    setState(() {});
    _animation.addStatusListener((status) {
      if(status == AnimationStatus.completed){
        _controller.reverse();
      }else if(status == AnimationStatus.dismissed){
        _controller.forward();
        setState(() {

        });
      }
    });
  }
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        FadeTransition(
          opacity: _animation,
          child: Container(
            margin: EdgeInsets.only(bottom: 5),
            child: Text(
              'Select below to improve your matches',
              style: TextStyle(
                  fontSize: 15,
                  color: Colors.white
              ),
            ),
          ),
        ),
        GestureDetector(
          onTap: (){
            Util.sendAnalyticsActionEvent('match_join');
            if (MyInfo.vip == 0) {
              showModalBottomSheet(
                context: context,
                isScrollControlled: true,
                backgroundColor: Colors.transparent,
                builder: (BuildContext context) {
                  return BuyVip();
                },
              );
            } else {
              Util.showToast('${S.of(context).isvip}');
            }
          },
          child: Container(
            margin: EdgeInsets.only(left: 20, right: 20),
            padding:
            EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 10),
            width: ScreenService.width,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(10),
                  topLeft: Radius.circular(10),
                )
            ),
            child: Row(
              children: [
                Image.asset(
                  'assets/image/vipl.png',
                  width: 40,
                  height: 40,
                ),
                SizedBox(
                  width: 15,
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Monkey+',
                        style: TextStyle(
                            fontSize: 18,
                            color: Colors.black),
                      ),
                      Container(
                          height: 15,
                          margin: EdgeInsets.only(top: 5),
                          child:Swiper(
                            itemCount: titles.length,
                            autoplay: true,
                            scrollDirection: Axis.vertical,
                            itemBuilder: (context,index){
                              return Container(
                                height: 15,
                                child: Text(
                                  titles[index],
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                      color: Colors.grey,fontSize: 12
                                  ),
                                ),
                              );
                            },
                          )
                      ),
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(
                      left: 20, right: 20, top: 10, bottom: 10),
                  decoration: BoxDecoration(
                      color: Color(0xff6349F0),
                      borderRadius: BorderRadius.circular((20))),
                  child: Text(
                    'Join',
                    style: TextStyle(fontSize: 15, color: Colors.white),
                  ),
                )
              ],
            ),
          ),
        ),
        Container(
          width: ScreenService.width,
          margin: EdgeInsets.only(left: 10,right: 10),
          padding: EdgeInsets.only(left: 15, right: 15, top: 40,bottom: 30),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(10),
              topLeft: Radius.circular(10),
            ),
            color: Color(0xff1e154a),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Image.asset(
                    'assets/image/yaogan.png',
                    width: 25,
                    height: 25,
                    fit: BoxFit.cover,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Text(
                    'CHAT CONTROL',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 15, color: Colors.grey),
                  ),
                ],
              ),
              Container(
                  margin: EdgeInsets.only(top: 20),
                  child: Row(
                    children: [
                      Image.asset(
                        'assets/image/megpage.png',
                        width: 25,
                        height: 25,
                        fit: BoxFit.cover,
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      Text(
                        'Chat with',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 15,
                            fontFamily: 'my_medium'),
                      ),
                    ],
                  )
              ),
              Container(
                  margin: EdgeInsets.only(top: 20),
                  child: Row(
                    children: [
                      Expanded(
                          child: GestureDetector(
                            behavior: HitTestBehavior.opaque,
                            onTap: (){
                              choosePerson(2);
                              Util.sendAnalyticsActionEvent('match_girls');
                            },
                            child: Container(
                                decoration: BoxDecoration(
                                    border: Border.all(color: color[2], width: 2),
                                    borderRadius: BorderRadius.circular((10))),
                                child: Stack(
                                  children: [
                                    Center(
                                      child: Column(
                                        children: [
                                          SizedBox(height: 15,),
                                          Image.asset(
                                            'assets/image/girls.png',
                                            height: 40,
                                            width: 40,
                                          ),
                                          SizedBox(
                                            height: 10,
                                          ),
                                          Text(
                                            'Girls Only',
                                            style: TextStyle(
                                                color: Colors.white, fontSize: 15),
                                          ),
                                          SizedBox(height: 15,),
                                        ],
                                      ),
                                    ),
                                    Positioned(
                                        top: 5,
                                        right: 5,
                                        child: Row(
                                          children: [
                                            Image.asset(
                                              'assets/image/coins.png',
                                              width: 18,
                                            ),
                                            const SizedBox(
                                              width: 5,
                                            ),
                                            Text(
                                              MyInfo.vip !=0?'3':'6',
                                              style: TextStyle(
                                                  fontSize: 13, color: Colors.grey),
                                            ),
                                          ],
                                        ))
                                  ],
                                )),
                          )
                      ),
                      SizedBox(
                        width: 20,
                      ),
                      Expanded(
                          child: GestureDetector(
                            behavior: HitTestBehavior.opaque,
                            onTap: (){
                              Util.sendAnalyticsActionEvent('match_guys');
                              choosePerson(1);
                            },
                            child: Container(
                                decoration: BoxDecoration(
                                    border: Border.all(color: color[1], width: 2),
                                    borderRadius: BorderRadius.circular((10))),
                                child: Stack(
                                  children: [
                                    Center(
                                      child: Column(
                                        children: [
                                          SizedBox(height: 15,),
                                          Image.asset(
                                            'assets/image/guys.png',
                                            height: 40,
                                            width: 40,
                                          ),
                                          SizedBox(
                                            height: 10,
                                          ),
                                          Text(
                                            'Guys Only',
                                            style: TextStyle(
                                                color: Colors.white, fontSize: 15),
                                          ),
                                          SizedBox(height: 15,),
                                        ],
                                      ),
                                    ),
                                    Positioned(
                                        top: 5,
                                        right: 5,
                                        child: Row(
                                          children: [
                                            Image.asset(
                                              'assets/image/coins.png',
                                              width: 18,
                                            ),
                                            const SizedBox(
                                              width: 5,
                                            ),
                                            Text(
                                              MyInfo.vip !=0?'3':'6',
                                              style: TextStyle(
                                                  fontSize: 13, color: Colors.grey),
                                            ),
                                          ],
                                        ))
                                  ],
                                )),
                          )
                      ),
                    ],
                  )
              ),
              Container(
                margin: EdgeInsets.only(top: 10),
                child: GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: (){
                    choosePerson(0);
                  },
                  child: Container(
                      decoration: BoxDecoration(
                          border: Border.all(color: color[0], width: 2),
                          borderRadius: BorderRadius.circular((10))),
                      child: Stack(
                        children: [
                          Center(
                            child: Column(
                              children: [
                                SizedBox(height: 15,),
                                Image.asset(
                                  'assets/image/boths.png',
                                  height: 40,
                                  width: 40,
                                ),
                                SizedBox(
                                  height: 10,
                                ),
                                Text(
                                  'Guys / Girls',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 15),
                                ),
                                SizedBox(height: 15,),
                              ],
                            ),
                          ),
                          Positioned(
                              top: 5,
                              right: 5,
                              child: Text(
                                'Free',
                                style: TextStyle(
                                    fontSize: 13, color: Colors.grey),
                              ),)
                        ],
                      )),
                ),
              ),
              Container(
                width: ScreenService.width,
                margin: EdgeInsets.only(top: 30),
                child: GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () {
                    Util.sendAnalyticsActionEvent('match_buyCoins');
                    Navigator.of(context).push(
                        MaterialPageRoute(builder: (context) => BuyGold()));
                  },
                  child: Row(
                    children: [
                      Image.asset(
                        'assets/image/coins.png',
                        width: 25,
                        height: 25,
                        fit: BoxFit.cover,
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      Text(
                        'My Coins',
                        style: TextStyle(
                            fontSize: 16, color: Colors.white),
                      ),
                      Expanded(child: Container()),
                      Text(
                        '${MyInfo.gold}  ',
                        style: TextStyle(
                            fontSize: 15, color: Colors.white),
                      ),
                      Image.asset(
                        'assets/image/jia.png',
                        width: 25,
                        height: 25,
                        fit: BoxFit.cover,
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  choosePerson(i) {
    choose = i;
    color = [Color(0xff47406A),Color(0xff47406A),Color(0xff47406A)];
    color[i] = Colors.yellow;
    setState(() {});

    bus.emit('coinsex',i);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

}